<template>
	<view class="contract">
		
		<image src="../../../static/rcode.png" class="optition" @tap="router(1)"/>
		<!-- 标题 -->
		<view class="contract-title">
			<view class="contract-flex" :class="goodindex==index?'contract-show':''" v-for="(item,index) in ctitle" :key="index" @tap="getGoods(item,index)">
				{{item.title}}
			</view>
		</view>
		<!-- 策略库 -->
		<view class="fooler" v-if="goodindex==0" >
			<view class="prop">
				<view class="prop-bg"></view>
				<view class="prop-title">量化交易对</view>
			</view>
			<view class="fooler-title3" >
				<view class="title3 title3-title" v-for="(item,index) in Currency" :key="index" @tap="navSort(item,index)">
					{{item.name}}
					<image v-if="index==sSort &&index!=0" :src="sortType=='1'?imgurl.dsc:imgurl.desc"></image>
					<image v-else-if="index!=0" :src="imgurl.des"></image>
				</view>
			</view>
			<view class="fooler-title3"  v-for="(item,index) in bilei" :key="index" @tap="answer(item,index)" style="line-height: 40rpx;padding: 20rpx 0rpx;">
				<view class="title3 text" >
					{{cases(item.baseCurrency)}}<text>/{{cases(item.quoteCurrency)}}</text>
				</view>
				<view class="title3 text" >
					<view >{{pinter(item.newPrice,4)}}</view>
				</view>
				<view class="title3" >
					<view class="child" :class="{bgcolor:target(item.priceLimit)>=0,}">{{target(item.priceLimit)}}%</view>
				</view>
			</view>
		    <hide v-if="bilei.length=='0'"/>
		</view>
		<!-- 执行中 -->
		<view  v-if="goodindex==1">
			<view class="prop">
				<view class="prop-bg"></view>
				<view class="prop-title">币币策略</view>
			</view>
			<view class="ascompetent" @tap="router(2)">
				<view class="">
					<view class="item1">当前仓位余额</view>
					<view class="item2">{{pinter(balance.balance,4)}} (USDT)</view>
				</view>
				<view class="ascompetent-grouy">
					<view class="ascompetent-item" v-for="(item,index) in ascomptent" :key="index+'p'" >
						<view class="item1">{{item.name}}</view>
						<view class="item2">{{item.name=='总单数'?balance[item.key] || '0':pinter(balance[item.key],4)}}</view>
					</view>
				</view>
			</view>
			<view class="implement" style="margin-bottom: 20rpx;" @tap="btns(item,1)" v-for="(item,index) in goodlist" :key="index">
				<view class="implement1">
					<view class="implement1-item1">
						<view class="implement1-bold">追踪策略
						<view class="text" v-if="item.orderState!='-1'" style="padding-left: 10rpx;display: inline;">{{str(item.createTime)}} 
						<!-- #ifndef H5 -->
						{{time(item.createTime)}}
						<!-- #endif -->
						</view>
						<text class="error" v-else>({{item.startic}})</text>
						</view>
						<view class="item2">(订单编号:{{item.orderCode}})</view>
					</view>
					<view class="implement1-item2" >
					
					{{item.orderState=='-1'?'异常订单':strats[item.orderState-1]}}
					</view>
				</view>
				<view class="implement2">
					<view class="implement2-title implement1-bold">
						<view class="">
							Huobi
							<text class="text">({{cases(item.baseCurrency)}}/{{cases(item.quoteCurrency)}})</text>
						</view>
						<view class="implement1-item2">
							{{item.orderType=='0'?'执行中':'已结束'}}
						</view>
					</view>
					<view class="implement2-flex">
						<view class="">
							<view class="text">总投入(USDT)</view>
							<view class="flex-item1">{{pinter(item.totalAmount,4)}}</view>
						</view>
						<view class="">
							<view class="text" style="text-align: right;">
								 <image class="madel-image" @tap.stop="moadel(0)" src="../../../static/doubt.png" mode="aspectFill"></image>
								总收益（U）
							</view>
							<view class="flex-item1 color-falls" :class="{'color-rise':pinter(item.getProfitRespDto.totalEarnings,4)>=0}" style="font-weight: bold;">
							      {{pinter(item.getProfitRespDto.totalEarnings,4)}}
							<text :class="{'color-rise':pinter(item.getProfitRespDto.totalEarningsRate*100,2)>=0}">
							      ({{pinter(item.getProfitRespDto.totalEarningsRate*100,2)}}%)
							</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 盈亏 -->
				<view class="implement3" >
					<view class="implement3-w" v-for="(itemes,indexes) in income" :key="indexes+'p'">
						<view class="implement3-title">
						<image class="madel-image" @tap.stop="moadel(indexes+1)" src="../../../static/doubt.png" mode="aspectFill"></image>
						{{itemes.name}}
						</view>
						<view class="implement3-item"  :class="{'color-rise':pinter(item.getProfitRespDto[itemes.key],4)>=0}">
						{{indexes=='2'?pinter(item.getProfitRespDto[itemes.key]*100,4)+'%':pinter(item.getProfitRespDto[itemes.key],4)}}
						</view>
						<view class="implement3-item"  :class="{'color-rise':pinter(item.getProfitRespDto[itemes.keys]*100,4)>=0}">
						{{pinter(item.getProfitRespDto[itemes.keys]*100,4)}} <text>%</text>
						</view>
					</view>
				</view>
				<view class="implement4">
					<template v-if="item.check">
						<view class="implement4-grid">
							<view class="grid" v-for="(itemes,indexes) in listes.slice(0,3)" :key="indexes" @tap.stop="popup(itemes,item)">
								{{itemes.label}}
							</view>
						</view>
						<view class="implement4-grid">
							<view class="grid" v-for="(itemes,indexes) in listes.slice(3,7)" :key="indexes" @tap.stop="popup(itemes,item)">
								{{itemes.label}}
							</view>
						</view>
						<view class="implement4-flex">
							<!-- item.orderState=='-1' 订单异常 可以删除 -->
							<view class="btn" v-for="(items,indexs) in  btn.slice(0,item.orderState=='-1'?3:2)" :key="indexs" @tap.stop="btns(item,indexs)" >
									{{items}}
							</view>
						</view>
					</template>
					<view class="implement4-title" @tap.stop="item.check=true">
						{{item.check?'':'查看更多'}}
					</view>
				</view>
			</view>
			<u-loadmore :status="gloading" />
		</view>
		<u-modal v-model="model" :title="contenttitle[contentindex]" :show-cancel-button="event" cancel-color="#A6ADB4" :title-style="modelstyle" :content-style="modelstyle">
			<view class="slot-content">
				<rich-text :nodes="content[contentindex]"></rich-text>
			</view>
		</u-modal>
		<scroll-view scroll-y="true" v-if="popupShow" @tap="popupShow = false" class="scroll" >
		     <canvas canvas-id="firstCanvas" id="firstCanvas" style="padding-bottom: 50rpx;"  :style="{ width: `${imageW}px`, height: `${imageH}px` }" ></canvas>
		</scroll-view>
		<view class="popup" v-if="popupShow" style="z-index: 999;">
		  <view class="title">截图分享至</view>
		  <p-share ref="share" :image="resultBase64"></p-share>
		</view>
	</view>
</template>

<script>
	import {income,ary,arytitle,ascomptent,listes} from '../details.js'
	import qr from 'qr-image'
	export default {
		name:"goods",
		props:{
			goodindex:{//下标goodindex
				type:Number,
				default:0,
			},
			goodlist:{//列表
				type:Array,
				default:[]
			},
			gloading:{//加载显示
				type:String
			},
			balance:{//仓位余额
				type:Object
			}
		},
		computed:{
			cases() { //转大写
				return t => {
					if(!t) return ''
					return t.toUpperCase();
				}
			},
			pinter(){
				return (t,flex)=>{
						if(!t) return '0.0000'
						let data=this.util.decimal(t,flex)
						if(data=='0.0000'){//shib 这种小币种 都是7位小数点
							return this.util.decimal(t,7)
						}else{
							return data;
						}
				}
			},
			target(){
				return t=>{
					if (!t) return '0.00'
					let data = Number(t * 100)
					return this.util.decimal(data,2)
				}
			},
			str(){
				return t=>{
					return t.substring(0,16)
				}
			},
			time(){
				return t=>{
					let date='';
					var startTime = t.replace(/-/g, '/');
					var nowtime = new Date(startTime),  //获取当前时间
					    endtime = new Date();  //定义结束时间
					var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
					    day = Math.abs(Math.floor(lefttime/(1000*60*60*24))),  //计算天数
					    hour = Math.abs(Math.floor(lefttime/(1000*60*60)%24)),  //计算小时数
					    minute = Math.abs(Math.floor(lefttime/(1000*60)%60)); //计算分钟数
					return `${this.p(day)}天${this.p(hour)}时`;
				};
			},
		},
		data() {
			return {
				img:{
					hide:'/static/Collection.png',
					show:'/static/Collections.png',
				},
				Currency: [{
						name: '币种',
					},
					{
						name: '最新价',
						icon: '/static/desc.png',
					},
					{
						name: '24H涨幅',
						icon: '/static/dsc.png',
					}
				],
				imgurl: {
					desc: '/static/desc.png', //升序
					dsc: '/static/dsc.png', //降序
					des: '/static/des.png', //平
				},
				bilei: [],
				bileiindex:null,//下标、
				sortType: '1', //图片类型
				sSort: '1', //资产 或者盈亏
				wherthe:false,//升序降序
				datas:'newPrice',//升序降序字段
				pages:1,
				//以上是币种参数
				listes:listes,//类型数据
				strats: ['单次策略', '循环策略', '临时停止 ', '止盈停止 ', '清仓卖出'],//状态
				ascomptent:ascomptent,//仓位参数
				event:true,
				modelstyle:{
					"color":"#000000"
				},
				model:false,//提示 
				contenttitle: arytitle,//内容
				content: ary,//内容
				contentindex:0,//提示语下标
				income:income,//盈亏
				popupShow:false,//分享弹窗
				resultBase64:'',//下载图片
				imageW: uni.upx2px(650),//下载图片宽度
				imageH: uni.upx2px(1200),//下载图片高度
				btn:['分享','详情','删除'],//执行中按钮
				ctitle:[//bar
					{
						title:'策略库'
					},
					{
						title:'执行中'
					}
				],
				inter:null,
			};
		},
		mounted() {
			this.Collection()//币种列表
			this.datatime()//币种列表
		},
		destroyed() {
			clearInterval(this.inter);
		},
		methods:{
			datatime(){
			  this.inter=setInterval(()=>{
			     this.Collection()
			  },3000);
			},
			Collection(e=''){//币种数据
				this.request.post(`symbol/list?pageSize=50&page=${this.pages}`).then(res=>{
					if(res.data.code=='3') return clearInterval(this.inter);//重新登录断开
					this.bilei=res.data.data.sort(this.sortBy(this.datas, this.wherthe))
				})
			},
			answer(item,index){//进入设置参数
				this.bileiindex=index
				this.$Router.push({ path: '/pages/transaction/param', query: { type: JSON.stringify(item) }})
			},
			navSort(item, index) {//排序
				if (index == 0) return;
				if (this.sSort == index) {
					this.sortType++
					if (this.sortType > 2) this.sortType = 1
				} else {
					this.sSort = index
					this.sortType = 1
				}
				this.wherthe = this.sortType == '1' ? false : true; //降序顺序
				let i=item.name
				this.datas=i=='最新价'?'newPrice':'priceLimit'
				this.bilei=this.bilei.sort(this.sortBy(this.datas, this.wherthe))
			},
			sortBy(attr, rev) {
				//第二个参数没有传递 默认升序排列
				if (rev == undefined) {
					rev = 1;
				} else {
					rev = (rev) ? 1 : -1;
				}
				return function(a, b) {
					a = a[attr];
					b = b[attr];
					if (a < b) {
						return rev * -1;
					}
					if (a > b) {
						return rev * 1;
					}
					return 0;
				}
			},
			popup(item, itemes) { //模态框点击
				if (item.value == '6') { //加仓
					this.$Router.push({
						path: '/pages/transaction/scale',
						query:{type:JSON.stringify(itemes)}
					})
				}else { //策略
					uni.showModal({
					    title: item.name.title,
					    content: item.name.value,
					    success:  (res)=>{
					        if (res.confirm) {
					           this.request(`order/updateOrderState?id=${itemes.id}&orderState=${item.value}`)
					           .then(res=>{
					           	if(res.data.code==1){
					           		this.util.toast('设置成功')
					           		setTimeout(() => {
										this.$emit('goodlistes',1)
					           		}, 1500)
					           	}
					           })
					        }
					    }
					});
				}
			
			},
			moadel(index){//模态框提示
				this.contentindex=index
				this.model=true
			},
			getGoods(item,index){//切换标题
				this.$emit('update:goodindex',index)
			},
			router(e){
				if(e=='1'){
					this.$Router.push({ 
						path: '/pages/transaction/history',
						})
				}else if(e=='2'){
					this.$Router.push({
						path: '/pages/user/income',
						})
				}else{
				   this.$Router.push({ path: '/pages/transaction/Deal'})	
				}
			},
			btns(item,index){
				if(index=='2'){
					uni.showModal({
					    title: '订单删除',
					    content: '确定删除订单',
					    success:  (res)=>{
					        if (res.confirm) {
					           this.request(`order/deleteAbnormalOrders?id=${item.id}`)
					           .then(res=>{
					           	if(res.data.code==1){
					           		this.util.toast('删除订单成功')
					           		setTimeout(() => {
										this.$emit('goodlistes',1)
					           		}, 1500)
					           	}
					           })
					        }
					    }
					});
				}else if(index=='1'){//详情
					this.$Router.push({ path: '/pages/transaction/details',query:{type:JSON.stringify(item)}})
				}else{//分享
					this.popupShow=true
					this.qrR(item)//获取canvas图
				}
			},
			Message(t){
				return new Promise((resole,reject)=>{
					this.request({
						url:'/order/abnormalOrdersMessage',
						params:{
							orderCode:t
						}
					}).then(res=>{
						console.log(JSON.parse(res.data.data.errorInfo)['err-msg'])
						let data=res.data.data
						let start=JSON.parse(res.data.data.errorInfo)['err-msg']
						if(data.orderType=='buy-market'){
							resole('火币资产不足')
						}else if(data.orderType=='sell-market'){
							resole('本地资产不足')
						}
					})
				})
			},
			qrR(item) {
			  uni.showLoading({
			    title: '生成中',
			    mask:false
			  })
			  let share='http://zhugelianghua.oss-cn-beijing.aliyuncs.com/zhuge/app/trantshare.png';
			  let form = 'http://www.zglh.site/register/#?mark_code='+uni.getStorageSync('Login').code
			  const qrcode ='data:image/png;base64,' +uni.arrayBufferToBase64(qr.imageSync(form,{ margin: 2 }))
			  var context = uni.createCanvasContext('firstCanvas')
			  context.drawImage(share, 0, 0, this.imageW, this.imageH)
			  
			  // 总收益率
			  context.setFontSize(18)
			  context.setFillStyle(this.pinter(item.getProfitRespDto.totalEarningsRate*100,2)>0?'#16d172':'#e31345')
			  context.fillText(this.pinter(item.getProfitRespDto.totalEarningsRate*100,4)+' %',uni.upx2px(255),uni.upx2px(700))
			  // 交易对
			  context.setFontSize(12)
			  context.setFillStyle('#FFFFFF')
			  context.fillText(this.cases(item.baseCurrency)+"/"+this.cases(item.quoteCurrency),uni.upx2px(130),uni.upx2px(960))
			   // 总收益
			  context.setFontSize(13)
			 context.setFillStyle(this.pinter(item.getProfitRespDto.totalEarnings,4)>0?'#16d172':'#e31345')
			  context.fillText(this.pinter(item.getProfitRespDto.totalEarnings,4)+'U',uni.upx2px(450),uni.upx2px(960))
			  
			  context.drawImage(qrcode, uni.upx2px(480), uni.upx2px(1080), 48, 48) //二维码
			  setTimeout(() => {
			    context.draw(false, () => {
			      uni.canvasToTempFilePath({
			        canvasId: 'firstCanvas',
			        success: res => {
			          this.resultBase64 = res.tempFilePath
			        }
			      })
			    })
			    uni.hideLoading()
			  }, 2000)
			},
			p(s) {
			  return s < 10 ? '0' + s : s
			},
		}
	}
</script>

<style lang="scss" scoped>
	$radio:12rpx;
	$color-opact: $color-fu;
	.contract{
		padding: 50rpx 0rpx;
	}
.contract-title{
	@include flex;
	justify-content: center;
	border-radius: 12rpx;
	.contract-flex{
		background:#CCCCCC;
		line-height: 65rpx;
		padding: 0rpx 40rpx;
		color: #FFFFFF;
	}
	.contract-flex:nth-child(1){
		border-bottom-left-radius: $radio;
		border-top-left-radius: $radio;
	}
	.contract-flex:nth-child(2){
		border-bottom-right-radius: $radio;
		border-top-right-radius: $radio;
	}
	.contract-show{
		
		background: $light-color !important;
	}
}
.optition{
	width: 32rpx;
	height: 30rpx;
	position: absolute;
	right: 10rpx;
	margin-top: 20rpx;
}
.prop{
	padding: 45rpx 0rpx 0rpx;
	display: flex;
	.prop-bg{
		width: 10rpx;
		height: 40rpx;
		background: $light-color;
		margin-right: 15rpx;
		border-radius: 12rpx;
	}
	.prop-title{
		font-size: 36rpx;
		font-weight: bold;
	}
}
.contract-center{
	@include flex;
	// background-image: url(../../../static/goods.png);
	// @include background;
	background-color: #FFFFFF;
	padding: 40rpx;
	margin-top: 30rpx;
	border-radius: 20rpx;
	.center1{
		padding-right: 30rpx;
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
	.center2{
		.center2-item1{
			font-size: 32rpx;
			line-height: 60rpx;
			text{
				padding: 20rpx;
				color: $color-opact;
				font-size: 24rpx;
			}
		}
		.center2-item2{
			color: $color-opact;
			font-size: 24rpx;
			line-height: 35rpx;
			 text-overflow: -o-ellipsis-lastline;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  display: -webkit-box;
			  -webkit-line-clamp: 2;
			  line-clamp: 2;
			  -webkit-box-orient: vertical;
		}
	}
}
.implement1-bold{
				font-weight: bold;
				.text{
					line-height: 50rpx;
					font-size: 26rpx;
					color: $color-opact;
					font-weight: 400;
					transform: scale(0.58);
					
				}
				.error{
					color: $color-fall !important;//卖出红
					font-size: 30rpx !important;
					font-weight: bold;
					padding-left: 10rpx;
				}
			}
.implement{
	// background-image: url(../../../static/goods.png);
	// @include background;
	background-color: #FFFFFF;
	border-radius: 18rpx;
	padding: 40rpx 30rpx;
	margin-top: 30rpx;
	.implement1{
		@include flex;
		justify-content: space-between;
		border-bottom: 1rpx solid $border;
		padding: 5rpx 0rpx 10rpx;
		.implement1-item1{
			font-size: 32rpx;
			width: 81%;
			text{
				line-height: 50rpx;
				font-size: 24rpx;
				color: $color-opact;
			}
			.item2{
				font-size: 26rpx;
				font-weight: bold;
				padding-top: 5rpx;
			}
		}
		
	}
	.implement1-item2{
		font-size: 30rpx;
		// font-family: PingFang;
		font-weight: bold;
		// line-height: 50px;
		color: $light-color;
	}
	.madel-image{
		width: 20rpx;
		height: 20rpx;
		margin-right: 5rpx;
	}
    .implement2{
		font-size: 30rpx;
		padding: 15rpx 0rpx;
		border-bottom: 1rpx solid $border;
		.implement2-title{
			line-height: 50rpx;
			@include flex;
			justify-content: space-between;
		}
		.text{
			color: $color-opact;
			font-size: 24rpx;
			line-height: 45rpx;
			font-weight: 400;
		}
		.implement2-flex{
			@include flex;
			
			justify-content: space-between;
			.flex-item1{
			   line-height: 50rpx;	
			   
			   text{
				   // font-weight: bold;
				   font-size: 28rpx;padding-left: 10rpx;
			   }
			   
			}
			.text{
				font-weight: bold;
			}
			.color-falls{
				color: $color-fall ;//卖出红
			}
		}
	}
    .implement3{
		@include flex;
		padding: 15rpx 0rpx 0rpx;
		justify-content: space-between;
		color: $color-opact;
		font-size: 24rpx;
		align-items: center;
		.implement3-item{
			line-height: 50rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: $color-fall;
		}
		.implement3-title{
			line-height: 50rpx;
			font-weight: bold;
		}
	}
	.implement3-w:nth-child(3){
		text-align: right;
		}
	.implement4{
		// @include flex;
		padding: 20rpx 0rpx 0rpx;
		// justify-content: flex-end;
		color: $light-color;
		font-weight: bold;
		font-size: 30rpx;
		.implement4-title{
			text-align: center;
			color: #1677FF;
		}
		.implement4-grid{
			@include flex;
			justify-content: space-between;
			color: #FFFFFF;
			.grid{
				width: 30%;
				line-height: 70rpx;
				border-radius: 12rpx;
				margin: 10rpx 0rpx;
				background: #F3C31B;
				text-align: center;
				font-size: 26rpx;
			}
		}
		.implement4-flex{
			@include flex;
			justify-content: flex-end;
			margin: 20rpx 0rpx 0rpx;
			.btn{
				padding-left: 50rpx;
			}
		}
		
	}
}
   /deep/ .u-model{
       height: auto;
       overflow: hidden;
       font-size: 16px;
       background-color: $color-bgs;
	   border-radius: 15rpx;
   }
   /deep/ .u-mode-center-box{
    min-width: 50px;
    min-height: 50px;
    display: block;
    position: relative;
    background-color: $color-bgs;
}
/deep/ .u-model__btn--hover{
	 background-color: $color-bgs;
}
.popup {
	  // z-index: 9999;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  padding: 50rpx 0;
	  background: $color-bgs;
	  width: 100%;
	  
	  .title{
	    font-size: 32rpx;
	    line-height: 1.2;
	    margin-bottom: 15rpx;
	    text-align: center;
	  }
	  .item {
	    width: 33.33%;
	    @include flex;
	    flex-direction: column;
	  }
	  .text {
	    font-size: 26rpx;
	  }
	}
	.scroll{
		width: 100%;
		height: 72vh;
		z-index: 1;
		position: fixed;
		top: 0rpx;
		left: 50rpx;
		color: #000000;
		// padding-bottom: 50rpx;
	}
	.slot-content{
		padding: 30rpx 50rpx;
		font-size: 28rpx !important;
		text-align: center;
		color: #000000;
	}
	.ascompetent{
		margin-top: 30rpx;
		background-color: #FFFFFF;
		border-radius: 18rpx;
		padding: 30rpx;
		.ascompetent-grouy{
			@include flex;
			justify-content: space-between;
			padding-top: 10rpx;
		}
		.ascompetent-grouy:nth-child(3){
			@include flex;
			justify-content: space-between;
			padding-top: 10rpx;
		}
		.item1{
			line-height: 60rpx;
			color: $color-fu;
		}
		.item2{
			font-weight: bold;
			font-size: 30rpx;
		}
	}
	.title3-title{
		margin-top: 10rpx;
		line-height: 80rpx;
	}
	.fooler {
		padding: 0rpx 20rpx 20rpx;
		// margin-top: 20rpx;
		// background: #000000;
	
		.fooler-title {
			font-size: 28rpx;
			font-family: PingFang;
			color: #666666;
			display: flex;
			align-items: center;
	
			&::before {
				content: '';
				text-align: center;
				// background-image: url(../../static/jiaoyi.png);
				background-size: 80%;
				background-repeat: no-repeat;
				width: 50rpx;
				height: 32rpx;
				// padding-left: 30rpx;
				margin: 8rpx 0rpx 0rpx 10rpx;
			}
		}
	
		.fooler-title2 {
			display: flex;
			// border: 1px solid red;
			margin: 10rpx 0rpx;
	
			.title2 {
				// border: 1px solid red;
				// width: 12%;
				// border: 1px solid red;
				margin: 0rpx 15rpx;
				// transition: 0.5s;
				// padding-left: 15rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: bold;
				line-height: 55rpx;
				color: #999999;
	
			}
	
			.show {
				font-size: 34rpx;
				color: #333333;
				font-family: PingFang;
				font-weight: bold;
				border-bottom: 1rpx solid $border;
			}
		}
		.shows{
			background: rgba(#1677FF,0.2);
		}
		.hides{
			background: #263749;
		}
		.hides-color{
			color: #636F7C !important;
			text{
			color: #636F7C !important;	
			}
		}
		.fooler-title3 {
			display: flex;
			line-height: 70rpx;
			margin: 0rpx 10rpx;
			border-bottom: 1rpx solid $border;
	
			.title3 {
				display: flex;
				// display: inline-block;
				align-items: center;
				color: $color-fu;
				image {
					// margin-top: 15rpx;
					width: 20rpx;
					margin-left: 5rpx;
					height: 25rpx;
				}
	
				.img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				text{
					color: $color-fu;
					font-weight: 500;
					font-size: 24rpx;
					margin-top: 5rpx;
				}
				.child {
					display: inline;
					// padding: 10rpx 15rpx;
					// width: 120rpx;
					text-align: center;
					color: #FFFFFF;
					// border: 1px solid red;
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: 500;
					line-height: 60rpx;
					width: 130rpx;
					border-radius: 10rpx;
					background: rgba(#e31345,0.9);
					&.desc {
						color: #16D172;
					}
				}
				.bgcolor{
					background: rgba(#16d172,0.9);
				}
			}
	
			.title3:nth-child(1) {
				width: 40%;
			}
	
			.title3:nth-child(2) {
				// padding-left: 50rpx;
				width: 30%;
			}
	
			.title3:nth-child(3) {
				// text-align: right;
				justify-content: flex-end;
				width: 30%;
			}
		}
	}
	
	.text {
		font-size: 32rpx;
		font-family: PingFang;
		font-weight: bold;
		line-height: 60rpx;
		color: #000000 !important;
		.cnm {
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			line-height: 32rpx;
			color: #999999;
		}
	}
	.swiper-text{
		margin-top: 50rpx;
		// width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: 400;
		line-height: 36rpx;
		color: #999999;
		image{
			width: 186rpx;
			height: 201rpx;
			margin-bottom: 20rpx
		}
	}
	.popup-content {
		// position: absolute;
		// top:450rpx;
		// left: 50%;
		// margin-left: -295rpx;
		width: 590rpx;
		height: 388rpx;
		background: #000000;
		border-radius: 10rpx;
	    text-align: center;
		.titleer {
			// height: 50rpx;
			width: 100%;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #333333;
			border-bottom: 1rpx solid $border;
			opacity: 0.93;
		}
	
		.body-content {
			padding: 30rpx 40rpx;
	
			.text {
				margin-bottom: 24rpx;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #999999;
			}
		}
	
		.btn {
			margin: 0 auto;
			width: 422rpx;
			height: 80rpx;
			color: #000000;
			line-height: 80rpx;
			text-align: center;
			background: $light-color;
			opacity: 1;
			border-radius: 6rpx;
		}
	}
</style>
